<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
	<c:set var="root" value="${pageContext.request.contextPath }"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员登录</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style>.col-sm-5{position:relative;min-height:1px;padding-right:18px;padding-left:15px}</style>
<style >.col-sm-5{width:50.66666667%}</style>
<style>



body {
	margin-top: 20px;
	margin: 0 auto;
}

.carousel-inner .item img {
	width: 100%;
	height: 300px;
}
</style>

<script type="text/javascript" src="${pageContext.request.contextPath}/jq/jquery-1.8.3.js"></script>
<script type="text/javascript">
		//init 方法 。查询所有的省以及直辖市 。让后将查询到的结果 放到第一个下拉框中 。province...省
		$(function (){
			var url = "http://localhost:8080/IGEEKShop/LinkageServlet?state=init";
			$.post(url,function (data){
				$.each(data,function (){
					$("#province").append("<option value='"+this.id+"'>"+this.area_name+"</option>");
				});
			},"json");
		});
		
		$(function (){
			$("#province").change(function (){
				//alert(this.value);
				var url2 = "http://localhost:8080/IGEEKShop/LinkageServlet?state=city&pid="+this.value;
				$.post(url2,function (data){
					$("#city").prop("length",1);
					$("#area").prop("length",1);
					$.each(data,function (){
						$("#city").append("<option value='"+this.id+"'>"+this.area_name+"</option>");
					});
				},"json");
			});
		});
		
		$(function (){
			$("#city").change(function (){
				//alert(this.value);
				var url3 = "http://localhost:8080/IGEEKShop/LinkageServlet?state=area&cid="+this.value;
				$.post(url3,function(data){
					$("#area").prop("length",1);//变空之后 会产生一个小bug当查询直辖市的时候 ，由于清空之后只添加了一个option 所有值改变不了。
					$.each(data,function (){
						$("#area").append("<option value='"+this.id+"'>"+this.area_name+"</option>");
					});
				},"json");
			});
		})
	
		$(function (){
			$("#area").change(function (){
				//alert(this.value);
				var url3 = "http://localhost:8080/IGEEKShop/LinkageServlet?state=areatwo&aid="+this.value;
				$.post(url3,function(){
					
				},"json");
			});
		})
</script>



</head>




<body>
	<!-- 引入header.jsp -->
	<jsp:include page="/header.jsp"></jsp:include>
	
	<div class="container">
		<div class="row">
			<div style="margin: 0 auto; margin-top: 10px; width: 950px;">
				<strong>订单详情</strong>
				<table class="table table-bordered">
					<tbody>
						<tr class="warning">
							<th colspan="5">订单编号:${order.oid }</th>
						</tr>
						<tr class="warning">
							<th>图片</th>
							<th>商品</th>
							<th>价格</th>
							<th>数量</th>
							<th>小计</th>
						</tr>
						<c:forEach items="${order.orderItems }"  var = "orderItem">
						<tr class="active" >
							<td width="60" width="40%"><input type="hidden" name="id"
								value="22"> <img src="${orderItem.product.pimage }" width="70"
								height="60"></td>
							<td width="30%"><a target="_blank">${orderItem.product.pid }</a></td>
							<td width="20%">￥${orderItem.product.shop_price }</td>
							<td width="10%">5</td>
							<td width="15%"><span class="subtotal">￥${orderItem.subtotal }</span></td>
						</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>

			<div style="text-align: right; margin-right: 120px;">
				商品金额: <strong style="color: #ff6600;">￥${order.total }元</strong>
			</div>

		</div>

		<div>
			<hr />
			<form id="orderForm"  class="form-horizontal " action="${root }/ProductServlet?state=confirmOrder" method="post" 
				style="margin-top: 5px; margin-left: 150px;">
				
				<!-- 隐藏域向后台传递数据 -->
				<input type="hidden" name="method" value="updatedz">
				
				
				<div class="form-group">
				
					<label for="username" class="col-sm-1 control-label"><span>地址:</span>${order.address }</label>
					<div class="col-sm-5">
					<center>
					<select id="province" name="province">
					<option value="none">--请选择省--</option>	
					</select>
					<select id="city" name="city">
					<option value="none">--请选择市--</option>
					</select>
					<select id="area" name="area">
					<option value="none">--请选择县或者区--</option>
					</select>
				</center>
					 	 <!--  <input type="text" class="form-control" id="username"
							name = "address"  placeholder="请输入收货地址">-->
					</div>
				</div>
				<div class="form-group">
					<label for="inputPassword3" class="col-sm-1 control-label"><span>收货人:</span>${order.name }</label>
					<div class="col-sm-5">
						<input type="username" class="form-control" id="inputPassword3"
							name = "name" placeholder="请输收货人"  >
					</div>
				</div>
				<div class="form-group">
					<label for="confirmpwd" class="col-sm-1 control-label"><span>电话:</span>${order.telephone }</label>
					<div class="col-sm-5">
						<input type="password" class="form-control" id="confirmpwd"
							name ="telephone"  placeholder="请输入联系方式">
					</div>
				</div>
			

			<hr />

			<div style="margin-top: 5px; margin-left: 150px;">
				<strong>选择银行：</strong>
				<p>
					<br /> <input type="radio" name="pd_FrpId" value="ICBC-NET-B2C"
						checked="checked" />工商银行 <img src="./bank_img/icbc.bmp"
						align="middle" />&nbsp;&nbsp;&nbsp;&nbsp; <input type="radio"
						name="pd_FrpId" value="BOC-NET-B2C" />中国银行 <img
						src="./bank_img/bc.bmp" align="middle" />&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="pd_FrpId" value="ABC-NET-B2C" />农业银行 <img
						src="./bank_img/abc.bmp" align="middle" /> <br /> <br /> <input
						type="radio" name="pd_FrpId" value="BOCO-NET-B2C" />交通银行 <img
						src="./bank_img/bcc.bmp" align="middle" />&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="pd_FrpId" value="PINGANBANK-NET" />平安银行
					<img src="./bank_img/pingan.bmp" align="middle" />&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="pd_FrpId" value="CCB-NET-B2C" />建设银行 <img
						src="./bank_img/ccb.bmp" align="middle" /> <br /> <br /> <input
						type="radio" name="pd_FrpId" value="CEB-NET-B2C" />光大银行 <img
						src="./bank_img/guangda.bmp" align="middle" />&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="pd_FrpId" value="CMBCHINA-NET-B2C" />招商银行
					<img src="./bank_img/cmb.bmp" align="middle" />

				</p>
				<hr />
				<p style="text-align: right; margin-right: 100px;">
					<a href="javascript:document.getElementById('orderForm').submit();">
						<img src="./images/finalbutton.gif" width="204" height="51"
						border="0" />
					</a>
				</p>
				<hr />

			</div>
			</form>
		</div>

	</div>

	<!-- 引入footer.jsp -->
	<jsp:include page="/footer.jsp"></jsp:include>

</body>

</html>